<template>
  <view class="wrap flex flex-col h-full">
    <m-card customClass="m-2">
      <div class="flex flex-col" slot="head">
        <div class="flex" v-if="hasLogin">
          <div class="p-2 flex-1">
            <u-button type="success" @click="edit">新增书籍</u-button>
          </div>
          <div class="p-2 flex-1">
            <u-button type="default" @click="typeAdmin">分类管理</u-button>
          </div>
        </div>

        <div class="border-solid border border-gray-200 rounded mx-2">
          <!-- <u-dropdown>
						<u-dropdown-item v-model="typeId" title="分类" :options="typeOpt" @change="dropdownChange">
						</u-dropdown-item>
					</u-dropdown> -->
        </div>
      </div>
      <div>
        <u-grid :col="3">
          <u-grid-item span="4" v-for="(item, index) in bookList" :key="index">
            <div class="p-2">
              <div @click="handleItemClick(item._id)">
                <u-image height="200rpx" mode="heightFix" :src="item.photoUrl"></u-image>
              </div>
              <div class="py-2 h-16 flex items-center">
                {{item.name.length>17?item.name.slice(0, 17) + '...':item.name}}
              </div>
              <div class="flex justify-between" v-if="hasLogin">
                <u-button type="success" size="mini" @click="edit(item._id)">编辑</u-button>
                <u-button type="error" size="mini" @click="del(item._id)">删除</u-button>
              </div>
            </div>
          </u-grid-item>
        </u-grid>

      </div>
    </m-card>
    <u-modal v-model="modalShow" :content="modalContent" @confirm="modalConfirm" ref="uModal" show-cancel-button>
    </u-modal>
    <m-tab-bar></m-tab-bar>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        },
        bookList: [],
        typeOpt: [{
          label: '全部',
          value: 0
        }],
        typeId: '',
        sWhere: '',
        modalShow: false,
        modalContent: ''
      }
    },
    computed: mapState(['hasLogin']),
    onLoad() {

    },
    created() {
      this.typeInit()
      this.getBooksList()
    },
    methods: {
      dropdownChange(index) {
        this.getBooksList(index)
      },
      getBooksList(type) {
        uni.showLoading({
          mask: true
        })
        this.$reqFun.req("books", {
          action: 'list',
          type: type ? type : this.typeId
        }).then(res => {
          this.bookList = res.result.data
        }).finally(() => {
          uni.hideLoading()
        })
      },
      typeInit() {
        this.$reqFun.req("books", {
          action: 'typeList'
        }).then(res => {
          var arr = res.result.data.map(o => {
            return {
              value: o._id,
              label: o.name
            }
          });
          this.typeOpt = [...this.typeOpt, ...arr]
          // var obj= this.typeList.find(item => {
          //     return item.value === this.formData.type
          // })
          // if(obj){
          // 	this.formData.typeName = obj.label
          // }
        })
      },
      handleItemClick(id) {
        uni.navigateTo({
          url: './view?id=' + id + '&act=view'
        })
      },
      edit(id) {
        uni.navigateTo({
          url: typeof(id) === 'string' ? './view?id=' + id + '&act=edit' : './view?act=edit',
        })
      },
      del(id) {
        // modalShow:false,
        // modalContent:''
        this.modalShow = true
        this.delId = id
        this.modalContent = '是否删除'

      },
      modalConfirm() {
        this.$reqFun.req("books", {
          action: 'delete',
          id: this.delId
        }).then(res => {
          this.getBooksList()
        }).finally(() => {
          uni.hideLoading()
        })
      },
      typeAdmin() {
        console.log(111)
        uni.navigateTo({
          url: '/pages/books-type/list'
        })
      }
    }
  }
</script>

<style>
</style>
